<script setup lang="ts">
import { ref } from 'vue'
import type { FormData, listText } from './index';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import useDateText from './useDate';
const formData = ref<FormData>({
  account: '',
  password: '',
  date1: '',
  region: undefined,
  value: ''
});
const labelCol = ref({
  style: {
    width: '120px',
  },
});
const wrapperCol = ref({
  span: 14,
});
// 定义类型

// 定义下拉框数据
const list = ref<listText[]>([
  { id: '1', label: '中国' },
  { id: '2', label: '北京' },
  { id: '3', label: '西安' },
])
// 表单规则

const rules = {
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度为3-5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  date1: [
    { required: true, message: '请选择时间', trigger: 'change', type: 'object' }
  ],
  region: [
    { required: true, message: '请选择地区', trigger: 'change' }
  ],
  value: [
    { required: true, message: '请选择评分', trigger: 'change' }
  ]
}

// dom Form

const formRef = ref();
const shows = ref(true);
// 提交表单
const onSubmit = () => {
  setTimeout(() => {
    shows.value = false;
  }, 3000)

  // 获取表单值
  formRef.value.validate().then(() => {
    console.log(useDateText(formData.value.date1))
    // 请求成功之后, 提示用户
    formRef.value.resetFields();
  })
    .catch((error: ValidateErrorEntity<FormData>) => {
      console.log('error', error);
    });
}

// 取消请求
const close = () => {
  formRef.value.resetFields();
}
</script>

<template>
  <div class="home">
    <a-form :model="formData" ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
      <a-form-item label="账号: " name="account">
        <a-input v-model:value="formData.account" allowClear placeholder="请输入账号" />
      </a-form-item>
      <a-form-item label="密码: " name="password">
        <a-input v-model:value="formData.password" allowClear placeholder="请输入密码"></a-input>
      </a-form-item>
      <a-form-item label="时间: " name="date1">
        <a-date-picker v-model:value="formData.date1" allowClear type="date" format="YYYY-MM-DD" placeholder="请选择时间"
          style="width: 100%" />
      </a-form-item>
      <a-form-item label="下拉框: " name="region">
        <a-select v-model:value="formData.region" placeholder="请选择" allowClear>
          <a-select-option v-for="item in list" :key="item.id" :value="item.id" :label="item.label">{{
            item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="评分: " name="value">
        <a-rate v-model:value="formData.value" />
      </a-form-item>
      <a-form-item>
        <a-row>
          <a-col :span="24" :offset="12">
            <a-button type="primary" size="default" @click="onSubmit">提交</a-button>
            <a-button style="margin-left: 10px" size="default" @click="close">取消</a-button>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
  <div class="box" v-if="shows">
    <a-button type="primary" size="default">打开弹窗</a-button>
  </div>
</template>

<style scoped>
.home {
  padding: 40px;
  width: 500px;
  height: 400px;
  background-color: #fff;
  box-shadow: 0px 10px 10px #ccc;
  margin: 40px auto;
  border-radius: 15px;
}

.box {
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: skyblue;
  box-shadow: 0px 10px 10px #ccc;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
